<template>
  	<div class="cooperation-contents">
  		<div class="cooperation-top">
       <div class="title">{{hzTitle}}</div>
        <div class="cooperation-explain" v-html='hzDesc'>
       </div>
      </div>
      <div class="cooperation-swiper">
        <swiper :options="swiperOption">
          <swiper-slide v-for='(item, index) in swiperList' :key='index'>
            <img class="positionCenter" :src="item.url"  v-if='item.type.indexOf("image") > -1'>
            <video x5-video-player-type="h5" width="100%" height="100%" controls="controls" v-else>
              <source :src="item.url" type="video/mp4">
            </video>
          </swiper-slide>
        </swiper>
      </div>
      <div>加入我们</div>
      <div class="referral">
        <div class="referralInfo box-shadw text-center">
          <input placeholder="姓名" type="text" v-model="name" name="name">
          <input placeholder="手机号" type="text" v-model="phone" name="phone">
          <addressInfo :domicile ="domicile" class="info"></addressInfo>
          <button @click="referralButton()">立即加盟</button>
        </div>
      </div>
      <a :href="telInfo" class="service">
        <img src="/static/wechat/images/service.png" alt="">
      </a>
    </div>
</template>

<script>
  import address from './address'
  import { eventBus } from '@/common/eventBus'
  import {commitStore, getBrokers, getJoinInfo} from'@/controller'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'referral',
    components: {
      addressInfo:address,
      swiper,
      swiperSlide
    },
    data () {
      return {
        msg: 'cooperation',
        name:'',
        phone:'',
        domicile:'',
        referralList:[],
        title:'',
        rule:'',
        isDoMove:false,
        telInfo:'',
        hzTitle: '',
        hzDesc: '',
        swiperList: [],
        swiperOption: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
           rotate: 0,
           stretch: 10,
           depth: 60,
           modifier: 2,
           slideShadows : false
         },
         loop: false,
         pagination: {
          el: '.swiper-pagination'
        }
      }
      }
    },
    created(){
      let myAgentTel = localStorage.getItem('myAgentTel')
      if(!myAgentTel){
        getBrokers().then((res)=>{
          //暂时先分一个 后面再添加
          this.telInfo = 'tel:'+ res.data[0].brokerPhone
        })
      }else{
        this.telInfo = 'tel:'+ myAgentTel
      }
      this.init();
    },
    methods:{
      async init() {
        const res = await getJoinInfo();
        this.hzTitle = res.data.hzTitle;
        this.hzDesc = res.data.hzDesc;
        this.swiperList = JSON.parse(res.data.hzFile);
      },

      doMove(){
        this.isDoMove = true;
        setTimeout(()=>{
          this.referralList.push(this.referralList[0]);
          this.referralList.shift();
          this.isDoMove = false;
        },500)
      },
      referralButton(){
        let regName =/^[\u4e00-\u9fa5]{2,4}$/;
        if(this.name==''||this.name==undefined){
          this.$toast.center("请输入姓名")
        }if(!regName.test(this.name)){
          this.$toast.center("请输入真实姓名")
        }else if(this.phone==''||this.phone==undefined){
          this.$toast.center("请输入电话")
        }else if(this.domicile==''||this.domicile==undefined){
          this.$toast.center("请输入所在地")
        }else{
          let params = {
              storeContacts: this.name,
              storeContactsPhone: this.phone,
              storeLocation: this.domicile,
          }
          commitStore(params).then((data)=>{
              if(data.code==0){
                this.$router.push({
                  path:`/successfulCopSign`
                })
              }else if(data.code==1){
                this.$toast.center(data.message);
              }
          })
        }
      }
    },
    mounted(){
      eventBus.$on('getAddress', (val) => {
        this.domicile = val;
      });
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cooperation-top {
  width: 92%;
  margin: 0 auto;
  text-align: left;
}

.cooperation-explain {
  font-size: 12px;
  letter-spacing: 2px;
}

.cooperation-top .title{
  margin: 0 auto;
  padding: 4% 0;
  text-align: center;
  font-size: 20px;
}

.title img{
  width: 100%;
}

.cooperation-contents {
  width: 100vw;
  background: #208dee;
  color: #fff;
  text-align: center;
  padding: 0 0 4% 0;
}

.text-center {
  text-align: center;
}

.swiper-inner {
  width: 100%;
  height: 400px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 60vw;
  height: 70vw;
}

.cooperation-swiper {
  width: 100vw;
  margin: 10px 0;
}

.service{
  position: fixed;
  top: 70%;
  width: 16%;
  right: 0;
  z-index: 111;
}

.service img{
  width: 100%;
}

.positionCenter {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.backgroundBlack {
  background: #000;
}
</style>
